<template>
  <div>
    <h1>购物车</h1>
    <router-link to="/home" style="font-size:23px;text-decoration: none">首页</router-link>
    <el-button type="primary" @click="cancel()" size="mini">返回</el-button>
    <el-table :data="tableData" border v-loading="loading" :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}" style="margin-top:15px;">
      <el-table-column fixed prop="id" label="编号" width="180"></el-table-column>
      <el-table-column label="图片" width="70">
        <el-image :src="pet1"></el-image>
      </el-table-column>
      <el-table-column prop="cat_id" label="猫咪编号" width="180"></el-table-column>
      <el-table-column prop="cat_is_coupon" label="支持优惠券" width="180"></el-table-column>
      <el-table-column prop="cat_count" label="数量/只" width="180"></el-table-column>
      <el-table-column prop="cat_price" label="价格/元" width="180"></el-table-column>
      <el-table-column prop="cat_all_price" label="总价/元" width="180"></el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-popconfirm title="确定移除吗?" @confirm="delCars(scope.row)">
            <el-button slot="reference" type="info" icon="el-icon-delete" size="mini">
            </el-button>
            <button slot="reference" @click="reduceCount(scope.row)" style="margin:7px;">-</button>
            <button slot="reference" @click="addCount(scope.row)" style="margin:5px;">+</button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div style="height:400px;background:#BBFFFF">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-light" style="margin:90px;">
            <el-badge :value="carsCount" class="item">
              <span>结算购物车</span>
            </el-badge>
            <span style="margin:15px;font-size:19px;">￥{{sum}}.00</span>
            <el-tooltip class="item" effect="dark" content="可优惠500元，在支付后将失效" placement="top">
              <el-link :underline="false" @click="couponDialog()"><i class="el-icon-info"/>使用优惠码</el-link>
            </el-tooltip>
            <h3 style="color:red;margin-top:50px;">实付款￥{{last}}.00 <span style="font-size:15px;">(包邮)</span></h3>
            <p style="color:red;"><i class="el-icon-s-home"/> {{address}}
              <span style="margin-left:30px;">
                <el-link href="/personal" target="_blank" :underline="true" type="success"
                         style="font-size:18px;"><i class="el-icon-edit"></i></el-link>
                </span></p>
            <p style="color:red;"><i class="el-icon-user"/> {{receive}}
              <span style="margin-left:30px;"><i class="el-icon-phone-outline"/> {{phone}}</span>
            </p>
            <el-button type="danger" @click="goPay()" style="margin-top:18px;"
                       :disabled="sum?false:true"><i class="el-icon-shopping-bag-2"></i>
              前往支付
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import pet1 from '../assets/pet/pet4.jpg'
  import cookie from 'js-cookie'

  const axios = require('axios')
  export default {
    name: "Cars",
    data() {
      return {
        tableData: null,
        pageSize: '1',
        total: 0, /*总价*/
        loading: false,
        pet1: pet1,
        cat_count: '1',
        sum: 0, /*优惠后的总价*/
        last: 0,
        carsCount: 0,
        address: '北京市',
        receive: '小张',
        phone: ''
      }
    },
    mounted() {
      this.getSum() // 购物车总价
      this.getLast() //实付
      this.getCarsCount() // 获取购物车数量
      this.getInfo() // 获取地址 收货人  号码
      this.createOrder() // 获取订单号  查询订单信息并添加至数据库
    },
    methods: {
      couponDialog() {
        this.$prompt('请输入优惠码', '优惠码', {
          confirmButtonText: '提交',
          cancelButtonText: '取消',
          inputPattern: '',
          inputErrorMessage: '格式不正确'
        }).then(({value}) => {
          var that = this
          console.log('优惠码:' + value)
          axios.get('http://localhost:9000/coupon/judge/' + value).then(function (resp) {
            console.log('优惠码判断:' + resp.data)
            if (resp.data == 'success') {
              that.$message({
                type: 'success',
                message: '优惠码使用成功!'
              })
              axios.get('http://localhost:9000/cars/total/' + cookie.get('loginName')).then(function (resp) {
                that.last = resp.data - 500
                cookie.set('total', resp.data - 500)
              })
            } else if (resp.data == 'used') {
              that.$message({
                type: 'info',
                message: '优惠码已被使用过!'
              })
            } else {
              that.$message({
                type: 'info',
                message: '优惠码不存在!'
              })
            }
          })
        }).catch(() => {  //优惠码取消按钮
        });
      },
      delCars(row) {
        const _this = this
        _this.$message({
          type: 'success',
          message: '已移除'
        })
        axios.delete('http://localhost:9000/cars/delById/' + row.id).then(function (resp) {
          window.location.reload()
        })
      },
      reduceCount(row) {
        const _this = this
        axios.get('http://localhost:9000/cars/reduceCatCount/' + row.id).then(function (resp) {
          if (resp.data == 'number cannot be 0') {
            _this.$alert('数量不能为0!', '消息', {
              confirmButtonText: '确定'
            });
          } else {
            window.location.reload()
          }
        })
      },
      addCount(row) {
        const _this = this
        axios.get('http://localhost:9000/cars/addCatCount/' + row.id).then(function (resp) {
          if (resp.data == 'Quantity exceeds upper limit') {
            _this.$alert('数量超出上限!', '消息', {
              confirmButtonText: '确定'
            });
          } else {
            window.location.reload()
          }
        })
      },
      getSum() {  //总价
        var that = this
        axios.get('http://localhost:9000/cars/total/' + cookie.get('loginName')).then(function (resp) {
          that.sum = resp.data
          cookie.set('total', resp.data)
        })
      },
      getLast() {  //实付
        var that = this
        axios.get('http://localhost:9000/cars/total/' + cookie.get('loginName')).then(function (resp) {
          that.last = resp.data
          cookie.set('total', resp.data)
        })
      },
      getCarsCount() { // 获取当前用户的购物车数量
        var that = this
        axios.get('http://localhost:9000/cars/getCarsCount2/' + cookie.get('loginName')).then(function (resp) {
          that.carsCount = resp.data
        })
      },
      goPay() {
        //调用支付接口
        let money = cookie.get('total')
        // console.log('最终支付:' + money)
        axios.get('http://localhost:9000/cars/pay/' + money).then(function (resp) {
          //console.log(resp) 表单
        });
        window.location.href = 'http://localhost:9000/cars/pay/' + money;
      },
      cancel() {
        this.$router.go(-1)
      },
      getInfo() {
        const _this = this
        axios.get('http://localhost:9000/cars/getInfo/' + cookie.get('loginName')).then(function (resp) {
          _this.address = resp.data.address
          _this.receive = resp.data.receive
          let number = resp.data.phone
          _this.phone = number.substring(0, 3) + '****' + number.substring(7, 11)
        })
      },
      createOrder() {
        axios.get('http://localhost:9000/cars/getOrderId').then(function (resp) {
          if (resp.data != null) {
            console.log('订单号是:' + resp.data)
          } else {
            console.log('还没有订单号')
          }
        })
      }
    },
    created() {
      const _this = this
      axios.get('http://localhost:9000/cars/findPage2/' + cookie.get('loginName')).then(function (resp) {
        console.log(resp)
        _this.tableData = resp.data
      })
    }
  }
</script>

<style scoped>

</style>
